<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/orderset.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
    </head>
    <body class="hold-transition">
    <div id="app">

        <div class="content-header">
            <h1>预约管理<small>预约设置</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                <el-breadcrumb-item>预约设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="app-container">
            <div class="box">
                <div class="box ordersetting">

                    <!-- 模板下载和文件上传组件 -->
                    <el-card class="box-card">
                        <div class="boxMain">
                            <el-button style="margin-bottom: 20px;margin-right: 20px"  type="primary" @click="downloadTemplate()">模板下载</el-button>
                            <el-upload action="http://localhost:82/ordersetting/upload.do"
                                       name="excelFile"
                                       :show-file-list="false"
                                       :on-success="handleSuccess"
                                       :before-upload="beforeUpload">
                                <el-button type="primary">上传文件</el-button>
                            </el-upload>

                        <el-button style="margin-left: 800px;margin-left: 800px" type="primary" @click="Delete()">定时清理</el-button></div>

                        <el-dialog
                                title="请设置删除期限"
                                :visible.sync="dialogVisible"
                                width="35%"
                                >

                            <el-row >
                            <template>
                                <el-select v-model="Time.month" placeholder="请选择月份">
                                    <el-option
                                            v-for="item in cities"
                                            :key="item.month"
                                            :label="item.label"
                                            :value="item.month">
                                        <span style="float: left">{{ item.label }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                    </el-option>
                                </el-select>



                                <span style="float: right;margin-right: 20px;margin-top: 5px; font-size: 15px">
                                    {{SetTime}}
                            </span>
                                        <!--<el-col :span="10">-->
                                            <!--<el-card shadow="always">-->
                                                <!--{{SetTime}}-->
                                            <!--</el-card>-->
                                        <!--</el-col>-->
                            </template>
                            </el-row>


                    <el-row>
                        <template>
                                <el-select v-model="Time.date"
                                           style="margin-top: 20px"
                                           placeholder="请选择日份">
                                    <el-option
                                            v-for="item in cities01"
                                            :key="item.date"
                                            :label="item.label01"
                                            :value="item.date">
                                        <span style="float: left">{{ item.label01 }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value01 }}</span>
                                    </el-option>
                                </el-select>
                            </template>
                            </el-row>

                            <div style="color: red;margin-top: 10px">* 只选月份（5月），5个月前的1号之前数据清空</div>
                            <div style="color: red;margin-top: 5px">* 只选日份（5日），每个月的5号之前数据清空</div>
                            <div style="color: red;margin-top: 5px">* 都选择（5月5日），5个月前的5号之前数据清空</div>


                            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="InsertDate()">确 定</el-button>
                        </span>
                        </el-dialog>

                        <div>
                            操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                        </div>
                    </el-card>

                    <div class="calendar">
                        <!-- 年份 月份 -->
                        <div class="month">
                            <div class="currentdate">
                                <span class="choose-year">{{ currentYear }}年</span>
                                <span class="choose-month">{{ currentMonth }}月</span>
                            </div>
                            <div class="choose">
                                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                                <span @click="pickNext(currentYear,currentMonth)">❯</span>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <!-- 星期   -->
                        <div class="caldate">
                            <ul class="weekdays">
                                <li>周一</li>
                                <li>周二</li>
                                <li>周三</li>
                                <li>周四</li>
                                <li>周五</li>
                                <li>周六</li>
                                <li>周日</li>
                            </ul>
                            <!-- 日期 -->
                            <ul class="days">
                                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                                <li v-for="dayobject in days">
                                    <template>
                                        <!-- 非当前月份 -->
                                        <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                            {{ dayobject.day.getDate() }}
                                        </div>
                                        <!-- 当前月 -->
                                        <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                            <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                                            
											<template>
                                                <template v-for="obj in leftobj">
                                                    <template v-if="obj.date == dayobject.day.getDate()">
                                                        <template v-if="obj.number > obj.reservations">
                                                            <div class="usual">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="fulled">
                                                                <p>可预约{{obj.number}}人</p>
                                                                <p>已预约{{obj.reservations}}人</p>
                                                                <p>已满</p>
                                                            </div>
                                                        </template>
                                                    </template>
                                                </template>
                                                <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                                            </template>
											
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{

                today:new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                LocalMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],

                leftobj: [],//用于装载页面显示的月份已经进行预约设置的数据
                backendUrl: 'http://localhost:82',
                dialogVisible: false,
                Time:{},
                cities: [{
                    month: '01',
                    label: '一月'
                }, {
                    month: '02',
                    label: '二月'
                }, {
                    month: '03',
                    label: '三月'
                }, {
                    month: '04',
                    label: '四月'
                }, {
                    month: '05',
                    label: '五月'
                }, {
                    month: '06',
                    label: '六月'
                }, {
                    month: '07',
                    label: '七月'
                }, {
                    month: '08',
                    label: '八月'
                }, {
                    month: '09',
                    label: '九月'
                }, {
                    month: '10',
                    label: '十月'
                }, {
                    month: '11',
                    label: '十一月'
                }, {
                    month: '12',
                    label: '十二月'
                }
                ],
                cities01: [{
                    date: '01',
                    label01: '1日'
                }, {
                    date: '02',
                    label01: '2日'
                }, {
                    date: '03',
                    label01: '3日'
                }, {
                    date: '04',
                    label01: '4日'
                }, {
                    date: '05',
                    label01: '5日'
                }, {
                    date: '06',
                    label01: '6日'
                }, {
                    date: '07',
                    label01: '7日'
                }, {
                    date: '08',
                    label01: '8日'
                }, {
                    date: '09',
                     label01: '9日'
                }, {
                    date: '10',
                     label01: '10日'
                }, {
                    date: '11',
                     label01: '11日'
                }, {
                    date: '12',
                     label01: '12日'
                }, {
                    date: '13',
                     label01: '13日'
                }, {
                    date: '14',
                    label01: '14日'
                }, {
                    date: '15',
                    label01: '15日'
                }, {
                    date: '16',
                    label01: '16日'
                }, {
                    date: '17',
                    label01: '17日'
                }, {
                    date: '18',
                    label01: '18日'
                }, {
                    date: '19',
                    label01: '19日'
                }, {
                    date: '20',
                    label01: '20日'
                }, {
                    date: '21',
                    label01: '21日'
                }, {
                    date: '22',
                    label01: '22日'
                }, {
                    date: '23',
                    label01: '23日'
                }, {
                    date: '24',
                    label01: '24日'
                }, {
                    date: '25',
                    label01: '25日'
                }, {
                    date: '26',
                    label01: '26日'
                }, {
                    date: '27',
                    label01: '27日'
                }, {
                    date: '28',
                    label01: '28日'
                }, {
                    date: '29',
                    label01: '29日'
                },{
                    date: '30',
                    label01: '30日'
                },{
                    date: '31',
                     label01: '31日'
                }
                ],
                month: '',
                date: '',
                SetTime:''
            },
            created: function () {//在vue初始化时调用
                this.initData(null);

            },
            methods: {
                Delete(){
                    this.dialogVisible =true;
                    this.Time={};
                    this.SetTimes();
                },
                SetTimes(){
                  axios.get(
                      this.backendUrl+"/ordersetting/SetTime.do"
                  ).then((res)=>{
                      this.SetTime=res.data.data;
                  }).catch((err)=>{
                      console.log(err)
                  })
                },

				//预约设置
                handleOrderSet(day){
                    this.$prompt('请输入可预约人数', '预约设置', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[0-9]*[1-9][0-9]*$/,
                        inputErrorMessage: '只能输入数字'
                    }).then(({ value }) => {

                        //把参数封装起来，后端可以用ordersetting接收
                        var param = {
                            number: value,
                            orderDate:  this.formatDate(day.getFullYear(),day.getMonth() + 1, day.getDate())
                        };

                        axios.post(this.backendUrl + "/ordersetting/edit.do", param).then((res)=>{
                            //更改成功给出提示
                            this.$message({
                                message: res.data.message,
                                type: res.data.flag ? "success" : "error"
                            });
                            //重新加载页面
                            this.initData(this.formatDate(this.currentYear , this.currentMonth , 1));

                        }).catch((err)=>{
                            console.log(err);
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });

                },

				//上传之前进行文件格式校验
                beforeUpload(file){
                    //获取上传文件的名称
                    var fileName = file.name;
                    //截取文件的类型
                    var extendName = fileName.substr(fileName.lastIndexOf(".")+1);

                    const isXLS = extendName === 'xls';
                    if(isXLS){
                        return true;
                    }
                    const isXLSX = extendName === 'xlsx';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;


                    //const isXLS = file.type === 'application/vnd.ms-excel';
                    //if(isXLS){
                    //    return true;
                    //}
                    //const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    //if (isXLSX) {
                    //    return true;
                    //}
                    //this.$message.error('上传文件只能是xls或者xlsx格式!');
                    //return false;

                },
				//下载模板文件
                downloadTemplate(){
                    window.location.href="../template/ordersetting_template.xlsx";
                },
				//上传成功提示
                handleSuccess(response, file) {
                    if(response.flag){
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.message);
                    }
                    //console.log(response, file, fileList);
                    //重新加载页面
                    this.initData(this.formatDate(this.currentYear,this.currentMonth,1));

                },
                //初始化当前页要展示的日期
				initData: function (cur) {
                    var date;
                    var index = 0;   //控制显示预定的天数
                    if (cur) {
                        date = new Date(cur);
                    } else {
                        var now = new Date();
                        date = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
                    }
                    this.currentDay = date.getDate();
                    this.currentYear = date.getFullYear();
                    this.currentMonth = date.getMonth() + 1;
                    this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                    var today = new Date();
                    this.LocalMonth = today.getMonth() + 1;
                    if (this.currentWeek == 0) {
                        this.currentWeek = 7;
                    }
                    var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                    this.days.length = 0;
                    // 今天是周日，放在第一行第7个位置，前面6个
                    //初始化本周
                    for (var i = this.currentWeek - 1; i >= 0; i--) {
                        var d = new Date(str);
                        d.setDate(d.getDate() - i);
                        var dayobject = {};
                        dayobject.day = d;
                        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                    }
                    //其他周
                    for (var i = 1; i <= 42 - this.currentWeek; i++) {
                        var d = new Date(str);
                        d.setDate(d.getDate() + i);
                        var dayobject = {};//dayobject
                        dayobject.day = d;
                        this.days.push(dayobject);
                    }
                    
                    // this.leftobj = [
                    //     { date: 21, number: 120, reservations: 1 },
                    //     { date: 13, number: 120, reservations: 1 },
                    //     { date: 24, number: 120, reservations: 120 },
                    //     { date: 26, number: 120, reservations: 1 },
                    //     { date: 28, number: 120, reservations: 1 }
                    // ];

                    axios.post(this.backendUrl+"/ordersetting/findByMonth.do?month="+this.currentYear+"-"+this.currentMonth).then((res)=>{
                        this.leftobj = res.data.data;
                    }).catch((err)=>{
                        console.log(err)
                    });


                },
				//切换到当前月份
                goCurrentMonth: function (year, month) {
                    var d = new Date();
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向前一个月
                pickPre: function (year, month) {
                    // setDate(0); 上月最后一天
                    // setDate(-1); 上月倒数第二天
                    // setDate(dx) 参数dx为 上月最后一天的前后dx天
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(0);
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
				//向后一个月
                pickNext: function (year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(35);////获取指定天之后的日期
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
                // 返回 类似 2016-01-02 格式的字符串
                formatDate: function (year, month, day) {
                    var y = year;
                    var m = month;
                    if (m < 10) m = "0" + m;
                    var d = day;
                    if (d < 10) d = "0" + d;
                    return y + "-" + m + "-" + d
                },

                //定时清除数据
                InsertDate(){
                    this.dialogVisible=false;
                    axios.post(
                        this.backendUrl+"/ordersetting/DeleteTime.do",this.Time
                    ).then((res)=>{
                        this.$message({
                            type: res.data.flag?'success':'error',
                            message: res.data.message
                        });

                    }).catch((ree)=>{
                        console.log(ree)
                    })

                }
            }
        })
    </script>
</html>